<!doctype html>
<html class="os-windows screen-desktop-wide device-desktop">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0">
    <title>JSON校验格式化工具</title>
    <link rel="stylesheet" type="text/css" href="./static/css/global.min.css">
    <link rel="stylesheet" type="text/css" href="./static/css/indexCodeMirror.min.css">
    <style type="text/css">
        .container {
            width: 720px;
            padding: 0 10px 10px 10px;
            overflow: hidden
        }

        .json-frame {
            width: 740px;
            overflow-y: scroll
            /*padding-right: 20px;*/
        }
    </style>
</head>
<body>
<div class="container t-small-margin">
    <div class="btn-group">
        <button type="button" class="btn btn-primary" id="json" data-html="index">Json格式化校验</button>
        <button type="button" class="btn" id="timestamp" data-html="index">时间戳</button>
        <button type="button" class="btn" id="qrcode" data-html="index">二维码</button>
    </div>
    <iframe class="timestamp-frame" src="./timestamp.html" frameborder="0" width="620px" height="510px"
            style="display: none"></iframe>
    <div class="json-frame">
        <h1 class="font-18 v-big-margin no-padding-v">Json格式化校验</h1>
        <form name="main">
            <div class="editor-box1">
                <div class="float-left relative">
                    <div id="editor" style="width: 680px">
                        <textarea id="code" name="code"></textarea>
                        <div id="resize">
                            <i class="icon-bars"></i>
                        </div>
                    </div>
                    <div class="t-huge-margin">
                        <div class="btn-group">
                            <button class="copy hide display-none"></button>
                            <input type="submit" class="btn btn-primary" name="validate" data-ga="validate"
                                   id="validate"
                                   value="格式化校验">
                            <button type="button" class="btn" id="compressZipJson" data-html="index">压缩</button>
                            <button type="button" class="btn" id="escapeJson" data-html="index">转义</button>
                            <button type="button" class="btn" id="restoreJson" data-html="index">去除转义</button>
                            <button type="button" class="btn" id="unicode2ch" data-html="index">Unicode转中文</button>
                            <button type="button" class="btn" id="ch2unicode" data-html="index">中文转Unicode</button>
                            <button type="button" class="btn" id="json2get" data-html="index">转GET参数</button>
                            <button type="button" class="btn" id="copyJson" data-html="index">复制</button>
                        </div>
                        <button type="button" class="btn absolute btn-sm" style="bottom: 70px;right: 8px;z-index: 9"
                                id="clearCode" data-html="index">清空
                        </button>
                    </div>
                </div>
            </div>
        </form>
        <div class="with-icon display-none" id="jsonlintBox">
            <i class="icon-info-sign" id="jsonlintIcon"></i>
            <pre class="content" id="jsonlintResult">请贴入要格式化的JSON代码</pre>
        </div>
    </div>

    <div class="qrcode-frame container t-small-margin" style="display: none">
        <h1 class="font-18 v-big-margin no-padding-v">二维码生成和解码</h1>
        <div class="t-big-margin">
            <ul class="nav nav-tabs">
                <li class="active"><a data-tab="" href="#tabContent1">编码</a></li>
                <li><a data-tab="" href="#tabContent2">解码</a></li>
            </ul>
            <div class="tab-content qrcode-tab">
                <div class="tab-pane active fade in clear-both" id="tabContent1">
                    <div class="qrcode-input">
                        <p>输入文本：</p>
                        <div>
                            <textarea class="form-control" id="encode-text" rows="2"></textarea>
                        </div>
                        <div class="input-group t-big-margin">
                            <span class="input-group-addon">纠错等级：</span>
                            <select id="encode-eclevel" class="form-control">
                                <option value="1">Level L (7%)</option>
                                <option value="0">Level M (15%)</option>
                                <option value="3">Level Q (25%)</option>
                                <option value="2" selected>Level H (30%)</option>
                            </select>
                            <span class="input-group-addon bg-info-f noborder"> </span>
                            <span class="input-group-addon">编码方式：</span>
                            <select id="encode-mode" class="form-control">
                                <option value="4" selected>8bit</option>
                                <option value="2">Alphanumeric</option>
                                <option value="1">Numeric</option>
                            </select>
                        </div>
                        <div class="input-group t-big-margin">
                            <span class="input-group-addon">色块大小：</span>
                            <input id="encode-msize" type="number" min="1" max="10" value="5" class="form-control">
                            <span class="input-group-addon bg-info-f noborder"> </span>
                            <span class="input-group-addon">留白大小：</span>
                            <input class="form-control" id="encode-margin" type="number" min="0" max="10" value="2">
                        </div>
                        <div class="input-group t-big-margin">
                            <span class="input-group-addon">前景颜色：</span>
                            <input class="form-control qrcode-color no-alpha" value="#000000" id="encode-mcolor"
                                   readonly
                                   style="background-color: rgb(0, 0, 0); color: rgb(221, 221, 221);">
                            <span class="input-group-addon bg-info-f noborder"> </span>
                            <span class="input-group-addon">背景颜色：</span>
                            <input class="form-control qrcode-color no-alpha" value="#FFFFFF" id="encode-bgcolor"
                                   readonly
                                   style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34);">
                        </div>
                        <p class="t-large-margin">选择二维码图片：</p>
                        <div class="clear-both relative">
                            <div class="input-group float-left" style="width: 382px;margin-right: 25px">
                                <span class="input-group-addon">本地图片：</span>
                                <input id="uploadFile" type="text" class="form-control" readonly placeholder="请选择文件"
                                       value="">
                            </div>
                            <div class="qrcodeLocalBox">
                                <button class="btn" type="button">上传图片</button>
                                <input type="file" name="files[]" id="uploadQrcodeLogo">
                            </div>
                            <div class="qrcode-img">
                                <canvas id="logo-canvas"></canvas>
                            </div>
                        </div>
                        <div class="clear-both t-big-margin">
                            <div class="input-group float-left" style="width: 382px;margin-right: 25px">
                                <span class="input-group-addon">LogoUrl：</span>
                                <input type="url" id="encode-logo" class="form-control" placeholder="请输入图片地址">
                            </div>
                            <div class="qrcodeLocalBox">
                                <button id="encodeLoadUrlImg" class="btn" data-loading-text="加载中，请稍候...">加载图片</button>
                            </div>
                        </div>
                        <div class="t-huge-margin clear-both">
                            <div class="input-group float-left" style="width: 382px;margin-right: 25px">
                                <span class="input-group-addon">渲染方式：</span>
                                <select id="encode-render" class="form-control">
                                    <option value="canvas" selected>Canvas</option>
                                    <option value="table">Table</option>
                                    <option value="em">Em</option>
                                </select>
                            </div>
                            <div class="qrcodeLocalBox">
                                <button id="encodeCreateQrcode" class="btn btn-primary" style="width:200px"
                                        data-loading-text="生成中，请稍候...">生成二维码
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="qrcode-area">
                        <div id="encode-canvas"></div>
                        <button type="button" class="btn btn-primary display-none" id="downloadQrcode">下载二维码</button>
                    </div>
                </div>
                <div class="tab-pane fade" id="tabContent2">
                    <div class="clear-both">
                        <div class="input-group float-left" style="width: 382px;margin-right: 25px">
                            <span class="input-group-addon">选择二维码图片：</span>
                            <input id="uploadFileDecode" type="text" class="form-control" readonly placeholder="请选择文件"
                                   value="">
                        </div>
                        <div class="qrcodeLocalBox">
                            <button class="btn" type="button">上传二维码图片</button>
                            <input type="file" name="files[]" id="uploadQrcodeLogod">
                        </div>
                        <button id="decodeQrcodeBtn" class="btn btn-primary l-big-margin">解码二维码图片</button>
                    </div>
                    <div>
                        <canvas id="decode-canvas"></canvas>
                    </div>
                    <p class="t-huge-margin">解码值为</p>
                    <div>
                    <textarea class="form-control" rows="3" id="decoderes" name="content" placeholder="解码内容...."
                              data-bv-field="content"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="./static/js/switch.js">
    </script>

</div>
<script src="./static/js/global.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/js/indexCodeMirror.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/js/jsonlint.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/js/bejson_index20200722.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/js/colors.js" type="text/javascript" charset="utf-8"></script>
<script src="./static/js/jqColorPicker.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./static/js/qrcodeMerge.min.js"></script>
</body>
</html>